<template>
  <div class="body" @click="play()">
    <div class="audio-card">
      <!-- <i class="tico tico-apple-b audio-card__control" /> -->
      <img class="audio-card__control" src="../assets/svg/语音播放按钮-右边.svg"/>
      <div class="audio-card__bars">
        <div v-for="(item, index) in tone" :style="getBarsCellStyle(item)" :key="index"></div>
        <div class="audio-card__bars__shade-box">
          <div class="audio-card__bars__shade-box__shade" :style="getSharStyle"></div>
        </div>
      </div>
      <div class="audio-card__times">{{~~audio.duration}}″</div>
    </div>
  </div>
</template>

<script>
import Jindouyun from 'jindouyun'
const _jindouyun = new Jindouyun({
  userId: '1111435842045702146',
  header: {},
  token: ''
})
export default {
  data () {
    return {
      info: {
        tone: '[0.2222222222222222,0.16666666666666666,0.0,0.05555555555555555,0.0,0.7222222222222222,0.3333333333333333,0.2777777777777778,0.1111111111111111,0.2222222222222222,0.0]',
        fileName: '67c2bd64-6131-42fb-87ce-6504d4258275.aac',
        fileSize: '24871',
        isEncrypted: 0,
        receiverId: '572868525895450624',
        roomId: '633668171349360715',
        senderId: '624544801177468978',
        sourceId: '1207168537566683139',
        timestamp: 1576646382556
      },
      time: '',
      audio: {},
      timeShar: 0,
      playFlag: false
    }
  },
  created () {
    const audio = document.createElement('audio')
    audio.src = this.getUrl
    let timenterval
    audio.addEventListener('canplay', () => {
      this.audio = audio
    })
    audio.addEventListener('play', () => {
      this.playFlag = true
      timenterval = setInterval(() => {
        this.timeShar = this.barsPercentages()
      }, 100)
    })
    audio.addEventListener('pause', () => {
      clearInterval(timenterval)
    })
    audio.addEventListener('ended', () => {
      clearInterval(timenterval)
    })
  },
  computed: {
    tone: function () {
      return JSON.parse(this.info.tone)
    },
    getUrl: function () {
      return _jindouyun.getDownloadUrl({ isPublic: false, fileId: this.info.sourceId })
    },
    currentTime: function () {
      return this.audio.currentTime
    },
    getSharStyle: function () {
      if (this.playFlag) {
        return {
          width: `${100 - (this.timeShar * 100)}%`
        }
      } else {
        return {
          width: '0px'
        }
      }
    }
  },
  methods: {
    barsPercentages () {
      return this.audio.currentTime / this.audio.duration
    },
    play () {
      if (this.audio.paused) {
        this.audio.play()
      } else {
        this.audio.pause()
      }
    },
    getBarsCellStyle (height) {
      return {
        width: '5px',
        height: `${(18 * height) + 2}px`,
        backgroundColor: 'white',
        marginLeft: '5px'
        // opacity: 0.0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  display: flex;
}
.audio {
  display: none;
}
.audio-card {
  // background-color: #3478f5,
  background-color: #3478f5;
  padding: 10px 5px;
  border-radius: 100px;
  display: flex;
  &__control {
    // font-size: 20px;
    width: 20px;
  }
  &__bars {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    &__shade-box {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      justify-content: flex-end;
      &__shade {
        width: 100%;
        height: 100%;
        opacity: 0.5;
        // z-index: 100;
        background-color: #3478f5;
      }
    }
  }
}
</style>
